<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <One></One>
    <hr/>
    <three/>

</div>
</body>
<script>
    // 如果某个组件会在不同的组件中使用，那么建议将该组件声明为全局组件。
    // 声明全局组件：第一个参数是组件的名字，第二个参数是一个对象。
    Vue.component("Three",{
        data(){
            return {
                num:1
            }
        },
        methods:{
            setNum(num){
                this.num+=num;
            }
        },
        template:(`
            <button @click="setNum(100)">{{num}}</button>
        `)
    })
    new Vue({
        el:"#root",
        components:{
            One:{
                template:(`
                    <div>
                        <h3>One</h3>
                        <Three></Three>
                        <hr/>
                        <Child></Child>
                    </div>

				`),
                components:{
                    Child:{
                        template:(`
                            <div>
                                <h3>Child</h3>
                                <Three></Three>
                            </div>

						`)
                    }
                }
            }
        }
    })
</script>
</html>